import React, { useState, useEffect } from "react";
import { withRouter } from "next/router";
import Link from "next/link";
import { RightCircleFilled } from '@ant-design/icons';
import { replaceImageUrl, formatActivityClass } from '@/utils';
// css
import styles from '@/styles/Index.module.scss';
// icon
import linzhi from "@/public/imgs/home/linzhi.png";
import lasa from "@/public/imgs/home/lasa.png";
import ali from "@/public/imgs/home/ali.png";

const basePath = process.env.basePath;
const Tour = ({ title, data: { ssr_route, ssr_hotel, ssr_ticket } }) => {

    const [icon, setIcon] = useState("");
    const [url, setUrl] = useState("/");
    
    useEffect(() => {
        switch (title) {
            case '林芝旅游': {
                setIcon(basePath + linzhi.src);
                setUrl('/linzhi');
                break;
            }
            case '拉萨旅游': {
                setIcon(basePath + lasa.src);
                setUrl('/lasa');
                break;
            }
            case '阿里旅游': {
                setIcon(basePath + ali.src);
                setUrl('/ali') ;
                break;
            }
        }
    }, []);
    
    return (
        <div className="tour">
            <h2 className={styles['main-title']}>
                <img src={icon} alt={title + `-游西藏`} /> {title}
            </h2>
            <Link href={url} prefetch={false}>
                <a className={styles['more']} target="_blank">更多产品 <RightCircleFilled /></a>
            </Link>
            <div className={styles['cnt']}>
                <div className={styles['cnt-left']}>
                    {   //  线路
                        ssr_route.map((item, index) => {
                            return (
                                <Link href={`/line/${item.id}.html`} key={index} prefetch={false}>
                                    <a className={[styles[index == 0 ? 'big-box':'box'], formatActivityClass(item.algorithms)].join(' ')} title={item.description} target="_blank">
                                        <img src={replaceImageUrl(item.thumbnail)} alt={title + `-游西藏`} />
                                        <div className={styles['bg']}>
                                            <h3 className={styles['txt']}>{item.goodsName}</h3>
                                            <p className={styles['price']}>
                                                <b>￥</b><em>{item.showPrice}</em>起
                                            </p>
                                        </div>
                                    </a>
                                </Link>
                            )
                        })
                    }
                    {   //  酒店   
                        ssr_hotel.map((item, index) => {
                            return (
                                <Link href={`/hotel/${item.id}.html`} key={index} prefetch={false}>
                                    <a className={[styles['box'], styles['box-pos'], formatActivityClass(item.algorithms)].join(' ')} title={item.description} target="_blank">
                                        <img src={replaceImageUrl(item.thumbnail)} alt={title + `-游西藏`} />
                                        <div className={styles['bg']}>
                                            <h3 className={styles['txt']}>{item.goodsName}</h3>
                                            <p className={styles['price']}>
                                                <b>￥</b><em>{item.showPrice}</em>起
                                            </p>
                                        </div>
                                    </a>
                                </Link>
                            )
                        })
                    }
                </div>
                <div className={styles['cnt-right']}>
                    <h3 className={styles['sub-title']}>{title}热销榜</h3>
                    {   // 热销门票
                        ssr_ticket.map((item, index) => {
                            return (
                                <Link href={`/ticket/${item.id}.html`} key={index} prefetch={false}>
                                    <a className={styles['block']} title={item.description} target="_blank">
                                        <img src={replaceImageUrl(item.thumbnail)} alt={title + `-游西藏`} />
                                        <div className={styles['rank-bg']}></div>
                                        <div className={styles['rank']}>{index + 1}</div>
                                        <h3 className={styles['txt']}>{item.goodsName}</h3>
                                        <p className={styles.price}>
                                            <b>￥</b><em>{item.showPrice}</em>起
                                        </p>
                                    </a>
                                </Link>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}

export default withRouter(Tour)